<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>申请达人</title>
    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="${path}/plugins/bootstrap/css/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="${path}/plugins/bootstrap/css/animate.css" type="text/css">
    <link rel="stylesheet" href="${path}/plugins/bootstrap/css/font-awesome.css?v=4.4.0" type="text/css">
    <style>
        body {
            background-image: url(http://pzgv309jp.bkt.clouddn.com/b837a97c-2bf6-41f4-983c-b1f7d8142f3f.png);

            background-size: 1000px auto;
            background-repeat: no-repeat;
            background-position: 250px 60px;

        }
        input.error {
            border: 1px solid red;
        }

        label.error {


            padding-left: 16px;

            padding-bottom: 2px;

            font-weight: bold;

            color: #EA5200;
        }
    </style>
</head>

<body onload="initData()">



<%@include file="../common/nav_top.jsp"%>

    <!-- 申请 begin -->
    <div class="container-fluid">
        <div class="row">
            <div id="apply" style="margin:40px auto;">
                <img src="http://pzgv309jp.bkt.clouddn.com/1fa25c33-124f-44fd-887f-a889d08c2120.jpg" style="height: 100px;width: 200px;margin-left: 50px;opacity: 0.5;">
                <strong>悠 U 达人</strong>
            </div>
            <div style="text-align: center;margin-top: 150px">
                <span style="font-size:70px;font-family: '楷体'">达 人 集 结 号</span> <br>
                <span style="font-size:20px;">此时,已有 <span
                        style="color: aqua;font-family: '楷体';font-size: 24px">101</span>
                    人成为<span style="color: aqua;font-family: '楷体';font-size: 26px">悠U达人</span> 加入了这个神秘又高端的组织</span>
            </div>
            <div style="text-align: center;margin-top: 80px;">
                <button class="btn btn-danger dim btn-large-dim" type="button"
                    style="width: 240px;font-size: 24px;height: 60px">
                    <i class="fa fa-heart">
                        <a href="#apply_02" style="text-decoration: none">我要成为达人>>></a></i>
                </button>
            </div>
            <!-- 达人福利 -->
            <!-- 申请达人 begin -->
            <div style="text-align: center;margin-top: 40px;font-size: 32px">
                <strong style="color: aqua"> ' 如何成为达人 ' </strong>
            </div>
            <div style="text-align: center;margin-top: 20px;font-size: 22px">
                <strong style="font-family: '楷体';">1.注册悠U账号,超过一个月 </strong>
            </div>
            <div style="text-align: center;margin-top: 20px;font-size: 22px">
                <strong style="font-family: '楷体';">2.有一定的文字功底或者是拍照技术,热爱分享</strong>
            </div>
            <div style="text-align: center;margin-top: 20px;font-size: 22px">
                <strong style="font-family: '楷体';">3.发布至少5篇原创游记,其中三遍为高度浏览推荐游记</strong>
            </div>


            <!-- 申请达人表格 -->
            <div class="container-fluid" id="apply_02" style="margin-bottom:200px">
                <div class="row">
                    <div class="panel panel-default col-md-5" style="margin-left: 29%;border: none;margin-top: 30px">
                        <div class="panel-heading" style="text-align: center;font-size: 22px;background-color: aqua">

                            <h3 class="panel-title"> 申请成为达人
                            </h3>
                        </div>
                        <div class="panel-body"
                            style="padding-left: 15%;font-size: 14px;background-color: rgb(249, 255, 255)">
                            <form action="${path}/applyTraveler" method="post" role="form" class="applyForm" id="applyForm">
                                <div class="form-group" style="margin-top: 20px">
                                    <input type="hidden" value="${noteAuthor.id}" name="noteAuthorId">
                                    <input type="hidden" value="${noteAuthor.userId}" name="userId">
                                    请按情况填写信息  <span></span>
                                    <c:if test="${noteAuthor.flag == 1}">
                                    <span class="text-danger">您已经是达人了!!</span></c:if>
                                </div>
                                <div class="form-group"><span class="text-danger">*</span>
                                    姓&nbsp;&nbsp;&nbsp;&nbsp;名&nbsp;&nbsp;&nbsp;&nbsp;:<input type="text"
                                        style="margin-left: 5px;margin-top: 20px" id="applyName" name="applyName" value="${applyTraveler.applyName}">
                                </div>
                                <div class="form-group"><span class="text-danger">*</span>
                                    性&nbsp;&nbsp;&nbsp;&nbsp;别&nbsp;&nbsp;&nbsp;&nbsp;:
                                    <input type="radio" name="sex" value="男" id="sex_man" >男
                                    <input type="radio" style="margin-left: 5px;margin-top: 20px" name="sex" value="女"
                                        id="sex_woman">女
                                </div>
                                <div class="form-group"><span>&nbsp;</span>
                                    <div style="float: left;margin-right: 4px;padding-top: 8px;margin-left: 7px">
                                        出生日期&nbsp;:</div>
                                    <input id="hello" class="laydate-icon layer-date" style="float: left;"  >

                                </div>
                                <div class="form-group"><span class="text-danger">*</span>
                                    手机号码:<input type="text" style="margin-left: 5px;margin-top: 20px" id="phone"
                                        name="phone" value="${applyTraveler.phone}" onblur="checkPhone(this)">
                                    <span class="text-danger" id="phones"></span>
                                </div>
                                <div class="form-group"><span class="text-danger">*</span>
                                    常&nbsp;驻&nbsp;地&nbsp;:
                                    <select id="province" onchange="changeCity(this)" style="width: 100px;height:25px">
                                        <option value="${province}">请选择省份</option>
                                    </select>

                                    <select id="city" style="width: 100px;height:25px">
                                        <option value="${city}">请选择市</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <div style="float: left;padding-top: 27px;"> <span class="text-danger">*</span>
                                        简要自述:</div>
                                    <div style="float: left"><textarea
                                            style="margin-left: 5px;margin-top: 20px;height: 70px;width: 180px;resize: none"
                                            id="intro" name="intro" value="${applyTraveler.intro}"></textarea></div>
                                    <div style="clear: both">
                                        <span
                                            style="color: grey;font-size: 10px;margin-left: 60px;clear: both;">*例如,特长说明,去过的地方等</span>
                                    </div>
                                </div>
                                <div style="font-size: 10px;color:gray">
                                    <input type="checkbox" id="agree" name="agree">我已经同意《悠U达人协议》
                                </div>
                                <c:if test="${noteAuthor.flag == 1}">
                                <div class="form-group" style="margin-left:70px;margin-bottom: 50px;margin-top: 40px">
                                    <button type="submit" class="btn btn-primary" disabled>
                                        提交申请</button>

                                </div></c:if>
                                <c:if test="${noteAuthor.flag == 0}">
                                <div class="form-group" style="margin-left:70px;margin-bottom: 50px;margin-top: 40px">
                                    <button type="submit" class="btn btn-primary">
                                        提交申请</button>

                                </div></c:if>

                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 申请达人 end -->
        </div>
    </div>


    <!-- 申请 end -->

<!-- 申请 end -->
<%@include file="../common/nav_bottom.jsp"%>

<!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
<script src="${path}/plugins/jquery/jquery.min.js"></script>
<!--引入bootstrap的js文件-->
<script src="${path}/plugins/bootstrap/js/bootstrap.js"></script>

<script src="${path}/H+/js/plugins/validate/jquery.validate.min.js"></script>
    <script src="${path}/H+/js/plugins/validate/messages_zh.min.js"> </script>
    <%--<script src=${path}/H+/js/plugins/validate/additional-methods.min.js"> </script>--%>

    <!-- 日期 -->
    <script src="${path}/H+/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="${path}/H+/js/plugins/layer/laydate/laydate.js"></script>

    <!-- 自定义js -->
    <!-- <script src="../../js/content.js?v=1.0.0"></script> -->

    <script>

        <%--手机号码验证--%>
        function checkPhone(obj){
            var phone=obj.value;
            var re= new RegExp("^1[3|4|5|8][0-9]\\d{4,8}$");
            if(null!=phone&&phone.length>0){
                if(!re.test(phone)){
                    $("#phones").html("手机格式输入不正确!");
                    document.getElementById("phoneFlag").value='false';
                }else {
                    $("#phones").html("");
                }
            }
        }
        var provinces = ["江苏省", "安徽省"];

        var citys = [["苏州", "南京", "无锡", "常州", "徐州", "盐城", "宿迁", "泰州", "连云港", "淮安"], ["蚌埠", "滁州", "合肥", "宿州", "芜湖", "淮南", "巢湖", "六安", "黄山", "池州", "博州"]];


        //定义一个方法 - 用来模拟数据
        function initData() {

            var pro = document.getElementById("province");

            //遍历省份的数组
            for (var i = 0; i < provinces.length; i++) {
                //创建option标签
                var op = document.createElement("option");

                op.value = i;
                op.innerText = provinces[i];

                pro.appendChild(op);
            }

        }

        function changeCity(obj) {
            //获取对应的city
            var city_arr = citys[obj.value];

            var city = document.getElementById("city");
            //清空city
            // city.innerHTML="";
            // city.innerHTML="<option value='-1'>===请您选择市===</option>";

            city.options.length = 1;//保留默认的===请您选择市===


            //遍历city_arr
            for (var i = 0; i < city_arr.length; i++) {
                var opt = document.createElement("option");

                opt.value = i;
                opt.innerText = city_arr[i];

                city.appendChild(opt);
            }

        }

        $('#myCarousel').carousel({
            interval: 2000
        })
        // 表单验证
        $.validator.setDefaults({
            errorPlacement: function (error, element) {
                error.appendTo(element.parent());
            }
        });



        $().ready(function () {
            // 在键盘按下并释放及提交后验证提交表单
            $("#applyForm").validate({
                rules: {
                    applyName: {
                        required: true,
                        minlength: 2,
                        maxlength: 5
                    },
                    sex: "required",
                    phone: {
                        required: true,
                        minlength: 11,
                        maxlength: 11
                    },
                    intro: {
                        required: true

                    },
                    agree: "required"
                },
                messages: {
                    applyName: {
                        required: "请输入用户名",
                        minlength: "用户名必需由两个字母组成",
                        maxlength: "用户名最长为五个字母组成"
                    },
                    sex: {
                        required: "请选择您的性别",

                    },
                    phone: {
                        required: "请输入手机号码",
                        minlength: "请输入正确的手机号码",
                        maxlength: "请输入正确的手机号码"
                    },

                    agree: "请同意我们的协议",
                    intro: "请填写介绍"

                }
            })

        });


        //外部js调用
        laydate({
            elem: '#hello', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
            event: 'focus' //响应事件。如果没有传入event，则按照默认的click
        });







    </script>

</body>

</html>